<template>
    <el-select v-bind="$attrs"
			   @input="$emit('input',$event)"
               :clearable="clearable"
               :multiple="multiple"
               :placeholder="placeholder"
               :value="value"
               @change="change"
			   :style="{'width': selectWidth, 'margin-bottom': '5px'}"
    >
        <el-option
            v-for="(item,index) in list"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
    </el-select>
</template>

<script>
export default {
    name: "selectOne",
    props: {
        selectWidth: {
            type: String,
            default: "200px"
        },
        clearable: {
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: "请选择"
        },
        multiple: false,
        value: String | Number,
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
    },
    model: {
        event: 'input',
        prop: 'value'
    },
    methods: {
        change(data) {
            let row = {};
            for (var i in this.list) {
                if (this.list[i].value === data) {
                    row = this.list[i];
                    break;
                }
            }
            this.$emit('change', row)
        }
    }
}
</script>

<style scoped>

</style>